<!-- 阶段课详情 -->
<template>
  <div class="app-container">
    <div class="stage">
      <div class="head_cover">
        <img v-show="show" :src="List.cover" />
        <div v-show="!show" id="player"></div>
      </div>
      <div class="p15 clearfix" style="background: #ffffff; margin-bottom: 5px">
        <div class="class_head_title textoverflow2">{{ List.name }}</div>
      </div>
    </div>

    <van-tabs :swipe-threshold="1" v-model="active" sticky swipeable>
      <van-tab title="课程目录">
        <van-collapse v-model="activeNames">
          <van-collapse-item
            v-for="(item, index) in List.catalogs"
            :key="index"
            :title="item.name"
            :icon="require('@/assets/images/shoucang1.png')"
            :name="index + 1"
          >
            <div
              v-for="(les, index) in item.lesson"
              :key="index"
              class="collapse_div"
              @click="watch(les)"
            >
              <div class="collapse_name">{{ les.lesson_name }}</div>
              <div style="margin-top: 10px">
                <span class="collapse_time">
                  <van-icon name="underway-o" />
                  <span>{{ les.vod_duration }}</span>
                </span>
                <van-button round class="collapse_button">课后习题</van-button>
                <van-button round class="collapse_button">预习课件</van-button>
              </div>
            </div>
          </van-collapse-item>
        </van-collapse>
      </van-tab>
      <van-tab title="课程讲师" style="padding: 10px">
        <van-swipe :loop="false" :show-indicators="false">
          <van-swipe-item
            v-for="(item, index) in List.teachers"
            :key="index"
            @click="toTeachersInfo(item)"
          >
            <div class="pack_live_left">
              <img :src="item.avatar" class="pack_live_touxiang" />
              <div style="padding-left: 12px">
                <div class="pack_live_name">{{ item.name }}</div>
                <div class="pack_live_name1">{{ item.cert }}</div>
              </div>
            </div>
            <div class="pack_live_content">{{ item.intro }}</div>
          </van-swipe-item>
        </van-swipe>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Toast } from 'vant'
import moment from 'moment'
// import { getGoodsStageDetails, getVideoToken } from '@/api/home/product-list'
import { getGoodsStageDetails, getVideoToken } from '@/api/goods/pack'
export default {
  data() {
    return {
      queryParams: {
        goods_id: null,
        stage_id: null
      },
      List: {},
      teachersList: [{}],
      active: 0,
      activeNames: [1],
      // 保利威
      show: true,
      vodPlayerJs: 'https://player.polyv.net/script/player.js',
      playerJs: 'https://player.polyv.net/resp/live-h5-player/latest/liveplayer.min.js',
      playerList: {
        vid: '',
        playsafe: '',
        ts: '',
        sign: '',
        uid: '',
        channel_id: ''
      }
    }
  },

  computed: {},

  mounted() {
    this.queryParams = this.$route.query
    this.fetchList()
  },

  methods: {
    // 初始化数据
    fetchList() {
      getGoodsStageDetails(this.queryParams).then(res => {
        this.List = res.data
        this.teachersList = res.data.teachers || []
        const catalogs = this.List.catalogs
        catalogs.map(b => {
          const lesson = b.lesson
          lesson.map(j => {
            j.beg_time = moment(j.beg_time * 1000).format('YYYY-MM-DD HH:mm:ss')
            j.vod_duration = moment.utc(j.vod_duration * 1000).format('mm分ss秒')
          })
        })
      })
    },

    // 老详情
    toLecturerDetails(row) {
      this.$router.push({ path: '/lecturer-details', query: row })
    },
    // 名师团队
    toTeachersInfo(row) {
      this.$router.push({ name: 'TeachersInfo', query: row })
    },

    // 观看视频
    watch(row) {
      const data = {
        goods_id: this.queryParams.goods_id,
        lesson_id: row.lesson_id,
        channel_id: row.channel_id
      }
      this.$router.push({ path: '/chat-room', query: data })
      // if (this.queryParams.is_buy === 0 || this.queryParams.is_buy.length === 0) {
      //   return Toast.fail('课程未购买')
      // }
      // if (!this.show) {
      //   this.player.destroy()
      // }
      // if (row.status === 2) {
      //   const data = {
      //     vid: row.vid,
      //     goods_id: this.queryParams.goods_id,
      //     lesson_id: row.lesson_id
      //   }
      //   getVideoToken(data)
      //     .then(res => {
      //       this.show = false
      //       this.playerList.vid = res.data.videoId
      //       this.playerList.playsafe = res.data.token
      //       this.playerList.ts = res.data.ts
      //       this.playerList.sign = res.data.sign
      //       this.playerList.uid = res.data.userId
      //       this.loadPlayerScript(this.loadPlayer)
      //     })
      //     .catch(error => {
      //       Toast.fail(error.msg)
      //     })
      // } else {
      //   const data = {
      //     vid: null,
      //     goods_id: this.queryParams.goods_id,
      //     lesson_id: row.lesson_id
      //   }
      //   getVideoToken(data).then(res => {
      //     this.show = false
      //     this.playerList.channel_id = row.channel_id
      //     this.loadPlayerScript1(this.loadPlayer1)
      //   })
      // }
    },
    // 点播
    loadPlayerScript(callback) {
      if (!window.polyvPlayer) {
        const myScript = document.createElement('script')
        myScript.setAttribute('src', this.vodPlayerJs)
        myScript.onload = callback
        document.body.appendChild(myScript)
      } else {
        callback()
      }
    },
    loadPlayer() {
      const polyvPlayer = window.polyvPlayer
      this.player = polyvPlayer({
        wrap: '#player',
        width: '100%',
        height: '100%',
        autoplay: true,
        vid: this.playerList.vid,
        playsafe: this.playerList.playsafe,
        ts: this.playerList.ts,
        sign: this.playerList.sign,
        uid: this.playerList.uid
      })
    },
    // 直播
    loadPlayerScript1(callback) {
      if (!window.polyvLivePlayer) {
        const myScript = document.createElement('script')
        myScript.setAttribute('src', this.playerJs)
        myScript.onload = callback
        document.body.appendChild(myScript)
      } else {
        callback()
      }
    },
    loadPlayer1() {
      const polyvLivePlayer = window.polyvLivePlayer
      this.player = polyvLivePlayer({
        wrap: '#player',
        width: '100%',
        height: '100%',
        autoplay: true,
        vid: this.playerList.channel_id,
        uid: '0a4b11bac9'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-tabs__wrap {
  border-bottom: 1px solid #ddd;
}

.head_cover {
  padding-bottom: 56%;
  width: 100%;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  #player {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}

::v-deep .stage {
  .van-divider::after,
  .van-divider::before {
    border-width: 8px 0 0;
    border-color: #f6f6f6;
  }
}
.class_head_title {
  margin-top: 18px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  line-height: 26px;
}
.mulu {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  line-height: 30px;
}
.collapse_button {
  float: right;
  margin-left: 10px;
  height: 25px;
  background: #009697;
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
}

.collapse_div {
  border-bottom: 0.1px solid rgba(246, 246, 246, 1);
  padding-top: 10px;
  padding-bottom: 15px;
  .collapse_name {
    font-size: 13px;
    color: #333333;
    line-height: 19px;
  }
  .van-icon {
    font-size: 12px;
    margin-top: 2px;
    margin-right: 5px;
  }
}

.collapse_time {
  font-size: 12px;
  font-weight: 400;
  color: #999999;
}
// 金牌讲师
::v-deep .pack_live {
  margin-bottom: 50px;
  .van-swipe__track {
    width: 100% !important;
    margin-top: 8px;
  }
  .pack_live_div {
    // display: flex;
    box-sizing: border-box;
    width: 100% !important;
    height: 201px;
    padding: 25px 21px 0 22px;
    background: url('@/assets/images/shoucang1.png');
    background-size: 100% 100%;
    border-radius: 10px;
    .pack_live_left {
      display: flex;
      .pack_live_touxiang {
        width: 66px;
        height: 66px;
        border-radius: 50%;
      }
      .pack_live_name {
        font-size: 14px;
        font-weight: bold;
        color: #333333;
      }
      .pack_live_name1 {
        font-size: 13px;
        color: #333333;
      }
    }
    .pack_live_content {
      margin-top: 16px;
      font-size: 14px;
      color: #333333;
      line-height: 22px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }
}
::v-deep .van-collapse {
  .van-icon__image {
    width: 5px;
  }
}
::v-deep .van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
  border-width: 0;
}

.van-swipe-item {
  // display: flex;
  box-sizing: border-box;
  // width: 290px !important;
  height: 182px;
  padding: 15px;
  background: url('../../../assets/images/home_teacher_box.png');
  background-size: 100% 100%;
  border-radius: 5px;
  box-shadow: 0 3px 9px 0 rgb(50 50 50 / 8%);
  .pack_live_left {
    display: flex;
    .pack_live_touxiang {
      width: 66px;
      height: 66px;
      border-radius: 50%;
    }
    .pack_live_name {
      font-size: 14px;
      font-weight: 600;
      color: #333333;
      line-height: 38px;
    }
    .pack_live_name1 {
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      line-height: 18px;
    }
  }
  .pack_live_content {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 400;
    color: #666666;
    line-height: 22px;
    @include textoverflow(3);
  }
}
</style>
